<template>
	<div class="height_width-full">
		<div class="breadcrumb">
			<div class="breadcrumb-icon-box">
				<i class="el-icon-location-outline"></i>
			</div>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path : '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>报废方式</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-divider></el-divider>
		<div>
			<el-row>
				<el-button type="success" size="small" @click="handleEdit()">添加</el-button>
			</el-row>
			<el-row>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column label="序号" type="index">
					</el-table-column>
					<el-table-column label="报废方式名称" prop="title">
					</el-table-column>
					<el-table-column label="报废方式编码" prop="code">
					</el-table-column>
					<el-table-column label="报废备注" prop="remark">
						<template slot-scope="scope">
							<p class="remark-text">{{ scope.row.remark }}</p>
						</template>
					</el-table-column>
					<el-table-column label="报废状态">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.status == 1" active-text="启用" inactive-text="禁用"
								active-color="#13ce66" inactive-color="#ff4949"
								@change="statusChange($event , scope.row)">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" prop="createTime">
						<template slot-scope="scope">
							{{ new Date(scope.row.createTime).format("yyyy-MM-dd hh:mm:ss") }}
						</template>
					</el-table-column>
					<el-table-column width="300px" align="right">
						<template slot="header" slot-scope="scope">
							<el-row :gutter="5">
								<el-col :span="12">
									<el-input v-model="search.brandCode" size="mini" placeholder="报废方式编码"
										@input="searchChange()" />
								</el-col>
								<el-col :span="12">
									<el-input v-model="search.brandName" size="mini" placeholder="关键字搜索"
										@input="searchChange()" />
								</el-col>
							</el-row>
						</template>
						<template slot-scope="scope">
							<el-button type="success" size="mini" @click="showDetail(scope.row)">查看
							</el-button>
							<el-button style="margin: 0 20px" type="primary" size="mini" @click="handleEdit(scope.row)">
								编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<el-row>
				<div class="page-box">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
						layout=" prev, pager, next, jumper , sizes, total" :total="page.totalCount">
					</el-pagination>
				</div>
			</el-row>
		</div>
		<el-dialog title="报废方式" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="departForm">
				<el-form-item label="报废方式名称" :label-width="formLabelWidth" prop="title">
					<el-input v-model="form.title" autocomplete="off" placeholder="请输入报废方式名称"></el-input>
				</el-form-item>
				<el-form-item label="报废方式编码" :label-width="formLabelWidth" prop="code">
					<el-input v-model="form.code" autocomplete="off" placeholder="请输入报废方式编码"></el-input>
				</el-form-item>
				<el-form-item label="报废备注" :label-width="formLabelWidth" prop="remark">
					<el-input type="textarea" placeholder="请输入报废备注" autosize v-model="form.remark" autocomplete="off">
					</el-input>
				</el-form-item>
				<el-form-item label="报废状态" :label-width="formLabelWidth" prop="status">
					<el-switch v-model="form.status == 1" active-text="启用" inactive-text="禁用" active-color="#13ce66"
						inactive-color="#ff4949" @change="formStatusChange">
					</el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" :disabled="disabled" @click="saveBrand('departForm')">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="报废方式备注" :visible.sync="dialogDetailVisible">
			<div class="detail-text">
				<h2>{{ brandDetail.title }}</h2>
				<p>{{ brandDetail.remark }}</p>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogDetailVisible = false">确&nbsp;&nbsp;定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "AssetDiscardMode",
		data() {
			return {
        disabled:false,
				tableData: [],
				page: {
					currentPage: 1,
					pageSize: 10,
					pageSizes: [10, 50, 70, 100],
					totalCount: 0
				},
				search: {
					brandName: '',
					brandCode: ''
				},
				form: {
					id: null,
					title: '',
					code: '',
					status: 1,
					remark: '',
					assetUserId: this.Storage.Local.get("user").id
				},
				dialogFormVisible: false,
				dialogDetailVisible: false,
				formLabelWidth: '120px',
				rules: {
					title: [{
						required: true,
						message: "请输入报废方式名称",
						trigger: "blur"
					}, {
            max: 10, min: 2, message: "长度为2-10个字符", trigger: "blur"
          }],
					code: [{
						required: true,
						message: "请输入报废方式编码",
						trigger: "blur"
					}, {
            pattern: /^[1-9a-zA-Z][\da-zA-Z]{5,7}$/, message: "长度为6-8之间且不能以0开头", trigger: "blur"
          }],
					status: [{
						required: true,
						message: "请输入报废状态",
						trigger: "blur"
					}],
					remark: [{
            max: 100, message: "最多输入100个字符", trigger: "blur"
          }]
				},
				brandDetail: {}
			}
		},
		created() {
			this.getTableData(this.page.currentPage, this.page.pageSize);
		},
		methods: {
      toDisabled() {
        this.disabled = true;
        setTimeout(() => {
          this.disabled = false;
        }, 500)
      },
			searchChange() {
				this.getTableData(this.page.currentPage, this.page.pageSize);
			},
			saveBrand(formName) {
        this.toDisabled();
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.form.assetUserId = this.Storage.Local.get("user").id;
						this.$put(this.$api.API_DISCARD_MODE_SAVE, this.form).then(res => {
							console.log(res);
							if (res.data.code == 200) {
								this.$notify.success("保存成功");
								this.getTableData(this.page.currentPage, this.page.pageSize);
								this.dialogFormVisible = false;
							}
						})
					} else {
						this.$message.info("请填写表单必填项");
						return false;
					}
				});
			},
			handleEdit(row) {
				this.form = {
					id: null,
					title: '',
					code: '',
					status: 1,
					remark: '',
					assetUserId: this.Storage.Local.get("user").id
				};
				if (row) {
					this.form = JSON.parse(JSON.stringify(row))
				}
				this.dialogFormVisible = true;
			},
			formStatusChange(status) {
				console.log(status);
				this.form.status = status ? 1 : 2;
			},
			showDetail(data) {
				this.dialogDetailVisible = true;
				this.brandDetail = data;
			},
			getTableData(pageNum, pageSize) {
				this.$get(this.$api.API_DISCARD_MODE_LIST, {
					pageNum: pageNum,
					pageSize: pageSize,
					title: this.search.brandName,
					code: this.search.brandCode
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.tableData = res.data.data.list;
						this.page.currentPage = res.data.data.pageNum;
						this.page.pageSize = res.data.data.pageSize;
						this.page.totalCount = res.data.data.total;
					}
				})
			},
			statusChange($event, item) {
				if (!$event) {
					this.$confirm('您确定禁用该类型吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$put(this.$api.API_DISCARD_MODE_SAVE, {
							id: item.id,
							status: 2
						}).then(res => {
							if (res.data.code == 200) {
								this.$notify.success("禁用成功");
								item.status = 2;
							} else {
								this.$notify.error("禁用失败");
							}
						})
					}).catch(() => {
						item.status = 1;
					});
				} else {
					this.$put(this.$api.API_DISCARD_MODE_SAVE, {
						id: item.id,
						status: 1
					}).then(res => {
						if (res.data.code == 200) {
							this.$notify.success("启用成功");
							item.status = 1;
						} else {
							this.$notify.error("启用失败");
						}
					})
				}
			},
			handleSizeChange(data) {
        this.page.pageSize = data;
				this.getTableData(this.page.currentPage, data);
			},
			handleCurrentChange(data) {
				this.getTableData(data, this.page.pageSize);
			},
		}
	}
</script>

<style scoped>
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.page-box {
		margin-top: 10px;
	}

	.remark-text {
		margin: 0;
		padding: 0;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.detail-text {
		padding: 0 10px;
	}
</style>
